<template>
  <div class="main-container">
    <el-form inline>
      <el-form-item>
        <el-select v-model="queryParam.workerId" placeholder="请选择员工">
          <el-option v-for="item in workerList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="queryParam.dateRange" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
        <el-button type="primary" plain @click="exportExcel()">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-tag type="success">待审核确认的记录</el-tag>
      </el-form-item>
    </el-form>
    <el-table border :data="salaryDetailData" :span-method="arraySpanMethod" :row-class-name="tableRowClassName" :height="tableHeight">
      <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
      <el-table-column prop="confirmTime" label="填报时间" sortable align="center" width="180"></el-table-column>
      <!-- <el-table-column prop="workDate" label="完工日期" sortable align="center" width="120"></el-table-column> -->
      <el-table-column prop="noticeNumber" label="通知单号" align="center" width="100"></el-table-column>
      <el-table-column prop="drawingNumber" label="图号" align="center" width="120"></el-table-column>
      <el-table-column prop="productName" label="品名" align="center" width="120"></el-table-column>
      <el-table-column prop="dispatchFormNumber" label="派工单号" align="center" width="120"></el-table-column>
      <el-table-column label="工序" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.sequenceNumber }} {{ scope.row.processName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单双机" align="center" width="100">
        <el-table-column prop="single" label="设计" align="center" width="50">
          <template slot-scope="scope"> {{ scope.row.single == null ? '' : scope.row.single == true ? '单机' : '双机' }} </template>
        </el-table-column>
        <el-table-column prop="singleFinish" label="完工" align="center" width="50">
          <template slot-scope="scope"> {{ scope.row.singleFinish == null ? '' : scope.row.singleFinish == true ? '单机' : '双机' }} </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="dispatchNumber" label="派工数量" align="center" width="100"></el-table-column>
      <el-table-column prop="number" label="完工数量" align="center" width="80"></el-table-column>
      <el-table-column prop="numWorkQualifiedWork" label="合格" align="center" width="80"></el-table-column>
      <el-table-column prop="numWorkWasteIndustrial" label="工废" align="center" width="80"></el-table-column>
      <el-table-column prop="numWorkWasteMaterial" label="料废" align="center" width="80"></el-table-column>
      <el-table-column prop="quotaHour" label="定额工时" align="center" width="80"></el-table-column>
      <el-table-column prop="realWorkHour" label="实动工时" align="center" width="80"></el-table-column>
      <el-table-column label="平均用时" align="center" width="80">
        <template slot-scope="scope"> {{ scope.row.dispatchFormNumber == '-' ? '' : (scope.row.realWorkHour / scope.row.number).toFixed(2) }} </template>
      </el-table-column>
      <el-table-column prop="hourPrice" label="小时单价" align="center" width="80"></el-table-column>
      <el-table-column prop="recordState" label="状态" align="center" width="80"></el-table-column>
      <el-table-column prop="workHourTotal" label="总工时" align="right" fixed="right" min-width="80"></el-table-column>
      <el-table-column prop="workPriceTotal" label="总工资" align="right" fixed="right" min-width="80"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="queryParam.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNumber"
      background
      class="mt10"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { getSalaryDetail } from '@/api/report'
import { getUserWorkerList } from '@/api/interface1'
import { Component, Vue } from 'vue-property-decorator'
import { Message } from 'element-ui'
import dayjs from 'dayjs'
@Component({
  components: {}
})
export default class SalaryDetail extends Vue {
  tableHeight: any = '800px'
  created() {
    this.getWorkerList()
    // 判断路由来源：工资报表
    if (this.$route.params.from == 'salary-report') {
      this.queryParam.workerId = this.$route.params.workerId
      const searchMonth = this.$route.params.searchMonth
      const month = new Date(searchMonth)
      let start = new Date(month)
      start.setMonth(month.getMonth() - 1)
      start.setDate(24)
      const end = new Date(month)
      end.setDate(23)
      this.queryParam.dateRange = [start, end]
      this.query()
    }
    // 获取屏幕高度 设置表格高度
    let screenHeight = document.documentElement.clientHeight
    console.log('获取到的屏幕高度：' + screenHeight)
    this.tableHeight = screenHeight - 230 + 'px'
  }
  exportExcel() {
    let param = {
      workerId: this.queryParam.workerId,
      beginDate: dayjs(this.queryParam.dateRange[0]).format('YYYY-MM-DD'),
      endDate: dayjs(this.queryParam.dateRange[1]).format('YYYY-MM-DD')
    }
    window.open('/salary/detail/export?' + 'workerId=' + param.workerId + '&' + 'beginDate=' + param.beginDate + '&' + 'endDate=' + param.endDate)
  }
  workerList: any = []
  salaryDetailData: any = []
  totalNumber: number = 0
  queryParam: any = {
    workerId: 0,
    dateRange: [new Date(), new Date()],
    page: 1,
    pageSize: 20
  }

  async query() {
    let param = {
      workerId: this.queryParam.workerId,
      beginDate: dayjs(this.queryParam.dateRange[0]).format('YYYY-MM-DD'),
      endDate: dayjs(this.queryParam.dateRange[1]).format('YYYY-MM-DD'),
      page: this.queryParam.page,
      pageSize: this.queryParam.pageSize
    }

    let res = await getSalaryDetail(param)
    if (res) {
      this.salaryDetailData = res.data
      this.totalNumber = res.total
    }
  }

  /**
   * 获取工人列表
   */
  async getWorkerList() {
    let res = await getUserWorkerList().catch(err => {
      Message.error(err)
    })
    if (res) {
      this.workerList = res.data
    }
  }

  /**合并单元格 */
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (row.dispatchFormNumber == '-') {
      if (columnIndex === 2) {
        return [1, 3]
      } else if (columnIndex === 6) {
        return [1, 9]
      } else if ([3, 4, 7, 8, 9, 10, 11, 12, 13, 14].indexOf(columnIndex) > -1) {
        return [0, 0] // 这几列被合并了，但是要设置将其空间消除掉，不然页面上行高被撑开
      } else {
        return [1, 1]
      }
    }
  }

  tableRowClassName({ row, rowIndex }) {
    if (row.singleNeedConfirm == true || row.recordState == '未确认' || row.recordState == '待确认' || row.recordState == '待审核') {
      return 'success-row'
    }
    return ''
  }

  // 分页功能
  pageSizeChange(newSize) {
    this.queryParam.pageSize = newSize
    this.query()
  }
  pageChange(newPage) {
    this.queryParam.page = newPage
    this.query()
  }
}
</script>

<style></style>
